<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<title>登录</title>
	<!-- 样 式 文 件 -->
	<link rel="stylesheet" href="component/pear/css/pear.css" />
	<link rel="stylesheet" href="component/elementUI/index.css">
	<link rel="stylesheet" href="admin/css/other/login.css" />
	<link rel="icon" href="favicon.ico" type="image/x-icon">
	<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
	<style>
		html,body,#app,.container{
			width: 100%;height: 100%;
		}
	</style>
</head>
<!-- 代 码 结 构 -->

<body style="background-size: cover;">
	<div id="app" v-cloak>
		<div class="container" style="display: flex;align-items: center;">
			<form style="width: 400px; margin: auto;" action="javascript:void(0);">
				<div class="layui-form-item">
					<!-- <div class="logo"></div> -->
					<div style="text-align: center;font-size: 0.9rem;">
						<h1><span>供应链管理平台</span></h1>
					</div>
					<div class="text">欢迎登录</div>
				</div>
				<el-tabs type="border-card">
					<el-tab-pane label="手机号">
						<div class="layui-form-item">
							<input placeholder="请输入您的手机号" v-model.trim="formData.UserName" class="layui-input" />
							<span style="color: red;" v-cloak>{{usertishi}}</span>
						</div>
						<div class="layui-form-item" id="password">
							<input :type="passwordShow ? 'text' : 'password'" placeholder="请输入您的密码"
								v-model.trim="formData.Password" class="layui-input" />
							<span style="color: red;" v-cloak>{{passtishi}}</span>
							<div @click="passwordShow = !passwordShow">
								<img v-if="passwordShow" src="./admin/images/eye.png" alt="">
								<img v-else src="./admin/images/eyes.png" alt="">
							</div>
						</div>
						<div class="layui-form-item">
							<el-checkbox v-model="remember">记住密码</el-checkbox>
							<el-button @click="window.location.href = 'storeRegister.html'" class="register-button" type="text">注册店铺</el-button>
						</div>
						<div class="layui-form-item">
							<el-button class="my-button" type="primary" @click="handleLogin(0)">登 录</el-button>
						</div>
					</el-tab-pane>
					<el-tab-pane label="验证码">
						<div style="margin: 20px;"></div>
						<el-form ref="contract" :label-position="labelPosition" label-width="70px" :rules="rules"
							:model="formLabelAlign">
							<el-form-item label="手机号" prop="UserName">
								<el-input v-model.trim="formLabelAlign.UserName" placeholder="请输入您的手机号"></el-input>
							</el-form-item>
							<el-form-item label="验证码">
								<el-input v-model.trim="formLabelAlign.Code" placeholder="请输入您的验证码">
									<el-button slot="append" @click="sendMessage" icon="el-icon-position">
										{{timer?'剩余'+secend+'s':CodePrompt}}
									</el-button>
								</el-input>
							</el-form-item>
							<div style="margin-top: 10px;">
								<el-button class="my-button" @click="handleLogin(1)" type="primary">登 录</el-button>
							</div>
						</el-form>
					</el-tab-pane>
				</el-tabs>
			</form>
		</div>
	</div>
	<!-- 资 源 引 入 -->
	<script type="text/javascript" src="component/layui/layui.js"></script>
	<script type="text/javascript" src="component/pear/pear.js"></script>
	<script type="text/javascript" src="utils/jquery.min.js"></script>
	<script type="text/javascript" src="utils/jquery.cookie.js"></script>
	<script type="text/javascript" src="utils/vue.min.js"></script>
	<script type="text/javascript" src="config/config.js"></script>
	<script type="text/javascript" src="component/elementUI/index.js"></script>
	<script type="text/javascript" src="utils/utils.js"></script>
	<script>
		new Vue({
			el: '#app',
			data() {
				return {
					labelPosition: 'right',
					loading: false,
					passwordShow: false,
					usertishi: '',
					passtishi: '',
					formData: {
						UserName: '',
						Password: '',
					},
					formLabelAlign: {
						UserName: '15046006120',
						Code: ''
					},
					rules: {
						UserName: [{ required: true, message: '请输入您的手机号', trigger: 'blur' }]
					},
					remember: true,//记住密码
					expires_in: 0,//过期时间
					CodePrompt: '获取验证码',
					timer: null,
					secend: 60,
				}
			},
			mounted() {
				if (localStorage.getItem("AccountPassword")) {//获取本地换成密码
					this.formData = JSON.parse(localStorage.getItem("AccountPassword"))
					this.remember = true;
				} else {
					this.remember = false;
				}
				if (sessionStorage.getItem("REDIRECT")) {
					this.$notify.error({
						title: '登录过期',
						message: sessionStorage.getItem("REDIRECT")
					});
					sessionStorage.removeItem("REDIRECT");
				}
			},
			watch: {
				formData: {//记住密码
					handler(val) {
						if (val.UserName) {
							this.usertishi = '';
						}
						if (val.Password) {
							this.passtishi = '';
						}
						if (this.remember) {
							localStorage.setItem("AccountPassword", JSON.stringify(val))
						}
					},
					deep: true
				},
				remember(val) {//记住密码
					if (val) {
						localStorage.setItem("AccountPassword", JSON.stringify(this.formData))
					} else {
						localStorage.removeItem("AccountPassword");//删除记住的密码
					}
				}
			},
			methods: {
				sendMessage() {//发送验证码
					const that = this;
					this.$refs['contract'].validate((valid) => {
						if (valid && !that.timer) {
							that.secend = 60;
							that.secend--;
							that.timer = setInterval(() => {
								if (that.secend == '01') {
									clearInterval(that.timer)
									that.timer = null;
									return
								}
								that.secend--
								if (that.secend < 10) {
									that.secend = '0' + that.secend
								}
							}, 1000)
							$.ajax({
								url: `${BASE_URL2}/login/getVerificationCode?Telephone=${that.formLabelAlign.UserName}`,
								type: 'GET',
								complete: function (XMLHttpRequest) {
									requestPretreatment(XMLHttpRequest, that.formLabelAlign.UserName, (Status) => {
										if (Status == "error") {
											that.$message.error("系统繁忙，请稍后再试");
										}
									});
								},
							})
						}
					})
				},
				handleLogin(id) {
					if (!this.loading) {
						const that = this;
						if (id == 0) {//密码
							this.usertishi = '';
							this.passtishi = '';
							if (this.formData.UserName == '') {
								this.usertishi = '用户名不能为空';
							} else if (this.formData.Password == '') {
								this.passtishi = '密码不能为空';
							} else {
								this.loading = true
								$.ajax({
									url: `${BASE_URL2}/login/userLogin`,
									type: 'POST',
									data: that.formData,
									complete: function (XMLHttpRequest) {
										that.loading = false;
										requestPretreatment(XMLHttpRequest, that.formData.UserName, (Status) => {
											if (Status == "error") {
												that.$notify.error({
													title: '登录失败',
													message: '账号或密码错误！'
												});
											}else if(Status == "examine"){
												that.$notify({
													title: '登录失败',
													message: '该账单待平台审核',
													type: 'warning'
												});
											}
										});
									},
								})
							}
						} else if (id == 1) {//验证码
							$.ajax({
								url: `${BASE_URL2}/login/userLoginByVerificationCode?Telephone=${this.formLabelAlign.UserName}&Code=${this.formLabelAlign.Code}`,
								type: 'GET',
								complete: function (XMLHttpRequest) {
									that.loading = false;
									requestPretreatment(XMLHttpRequest, that.formData.UserName, (Status) => {
										if (Status == "error") {
											that.$notify.error({
												title: '验证码错误',
												message: '验证码不正确或已过期（有效期5分钟）！'
											});
										}
									});
								},
							})
						}
					}
				},
			}
		})
	</script>
</body>

</html>